<template>
  <div class="wrapper">
    <HeaderPart>门店详情</HeaderPart>
    <div class="foods">
      <p>门店商品:</p>
      <ul v-for="item in foodList" :key="item.id">
        <li>
          <div class="food">
            <img alt="图片未加载" :src="item.imgUrl">
            <div class="fonts">
              <p style="line-height: 20px; margin: 0">{{ item.name }}</p>
              <h4 style="line-height: 10px; margin-top: 8px; margin-bottom: 10px">{{ item.price }}元</h4>
              <h4 style="line-height: 10px; margin: 0; color: orange">{{ shopStatus(item.status) }}</h4>
              <h4 style="line-height: 10px">{{ item.description }}</h4>
            </div>
            <div v-if="item.status === 2" style="margin-left: auto" >
              <el-button type="primary" @click="update(item.id)"> 上架商品</el-button>
            </div>
          </div>
        </li>
      </ul>
      <el-button type="primary" size="large" @click="toAddFood">新建商品</el-button>
      <el-button style="margin: 15px 0" type="success" size="large" @click="toOrder">查看订单</el-button>
    </div>
  </div>
</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import {onBeforeMount, ref} from "vue";
import {getAllFood, updateFood} from "@/utils/api/FoodManager";
import {useRoute, useRouter} from "vue-router";
import {shopStatus} from "@/mixin/status";

// 定义食品列表
const foodList = ref([{id:1, name:'ddd', address:'hhhh', description:'sadja'}])
// 接收params
const shopId = parseInt(useRoute().params.id)
onBeforeMount(async ()=>{
  const res = await getAllFood({shopId})
  foodList.value = res.data
})
// 前往商品添加
const router = useRouter()
const toAddFood = ()=>{
  router.push("/add-food/" + shopId)
}
// 上架商品
const update =async (id)=>{
  const res = await updateFood({id})
  if(res){
    const res = await getAllFood({shopId})
    foodList.value = res.data
  }
}

// 查看订单
const toOrder =()=>{
  router.push('/business-order/' + shopId)
}
</script>

<style scoped>
.wrapper{
  height: 100vh;
  width: 100vw;
}
.foods {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.foods ul{
  list-style: none;
  padding-inline-start: 0;
}
.foods ul li {
  margin-bottom: 20px;
}
.foods ul li .food {
  height: 100px;
  width: 100%;
  display: flex;
  /*background-color: #70BC46;*/
}
.foods ul li .food .fonts {
  margin-left: 15px;
}
.foods ul li .food img {
  width: 100px;
  height: 100px;
}
.foods p {
  font-size: 20px;
  font-weight: 700;
}


</style>